<template>
	<div class="pro-head">
		<img src="../assets/img/profile/portrait.png">
		<span style="font-weight: 700; font-size: 22px;">wjd17333501984</span>
		<img src="../assets/img/profile/setting.png" @click="settings">
		<img src="../assets/img/profile/news.png">
	</div>
	<div class="food-card">
		<div>
			<span style="font-size: 20px;">吃货卡</span>
			<span>&nbsp;&nbsp;吃货豆：<span>10</span></span>
		</div>
		<span>升级超级吃货卡，每月得无门槛红包，下单5倍返利</span>
	</div>
	<div class="com-fuc">
		<span class="pro-title">常用功能</span>
		<div class="com-fuc-tol">
			<div class="com-fuc-item">
				<img src="../assets/img/profile/fuc1_hbkq.png">
				<span>红包卡券</span>
			</div>
			<div class="com-fuc-item">
				<img src="../assets/img/profile/fuc2_dpgz.png">
				<span>店铺关注</span>
			</div>
			<div @click="myshopping()" class="com-fuc-item">
				<img src="../assets/img/profile/fuc3_gwc.png">
				<span>购物车</span>
			</div>
			<div class="com-fuc-item">
				<img src="../assets/img/profile/fuc4_pjzx.png">
				<span>评价中心</span>
			</div>
		</div>
	</div>
	<div class="int-play">
		<span class="pro-title">互动玩乐</span>
		<div class="int-play-tol">
			<div class="int-play-item">
				<span>赚吃货斗</span>
				<span>可兑换大奖</span>
				<img src="../assets/img/profile/hdwl_zcd.png">
			</div>
			<div class="int-play-item">
				<span>现金提款机</span>
				<span>0门槛提现</span>
				<img src="../assets/img/profile/hdwl_tkj.png">
			</div>
			<div class="int-play-item">
				<span>0元…</span>
				<span>夺宝赢…</span>
				<img src="../assets/img/profile/hdwl_yuan.png">
			</div>
			<div class="int-play-item">
				<span>推荐有奖</span>
				<span>现金打款</span>
				<img src="../assets/img/profile/hdwl_tjyj.png">
			</div>
		</div>
	</div>
	<div class="my-wallet">
		<div class="wallet">
			<span class="pro-title">我的钱包</span>
			<span style="font-size: 14px; color: #999999;">8元红包 ></span>
		</div>
		<div class="wallet-tol">
			<div class="wallet-item">
				<span>借钱</span>
				<span style="font-size: 16px;">10万</span>
				<span style="color: #999999;">最高可借</span>
			</div>
			<div class="wallet-item">
				<span>干饭神卡</span>
				<span style="font-size: 16px;">7元</span>
				<span style="color: #999999;">外卖红包</span>
			</div>
			<div class="wallet-item">
				<span>享优惠</span>
				<span style="font-size: 16px;">178元</span>
				<span style="color: #999999;">绑卡立减</span>
			</div>
		</div>
	</div>
	<div class="more-rec">
		<span class="pro-title">更多推荐</span>
		<div class="rec-tol">
			<div class="rec-item">
				<img src="../assets/img/profile/wddz.png">
				<span>我的地址</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/wdkf.png">
				<span>我的客服</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/qdlxj.png">
				<span>签到领现金</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/qydc.png">
				<span>企业订餐</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/gfchd.png">
				<span>瓜分吃货豆</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/cbexb.png">
				<span>冲吧饿小宝</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/sqhq.png">
				<span>省钱好券</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/pphy.png">
				<span>品牌会员</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/zxqy.png">
				<span>尊享权益</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/qszm.png">
				<span>骑手招募</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/pxxx.png">
				<span>培训学习中心</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/swhz.png">
				<span>商务合作</span>
			</div>
			<div class="rec-item">
				<img src="../assets/img/profile/gy.png">
				<span>公益3小时</span>
			</div>
		</div>
	</div>
	<div class="static" style="height: 8vh;background-color: #000000;"></div>
</template>

<script>
	import {mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name: "Profile",
		data(){
			return{
				...mapGetters['userName']
			}
		},
		methods: {
			settings() {
				if(this.$store.state.isLogin){
					// console.log(this.$store.state.isLogin)
					this.$router.push({
						path: '/settings'
					});

				}else{
					// console.log(this.$store.state.isLogin)
					this.$router.push({
						path:'/login'
					})

				}
			},
			myshopping(){
				this.$router.push({path:'/shopping'})
			}

		}
	}
</script>

<style scoped>
	.pro-title {
		font-size: 16px;
		font-family: '楷体';
		font-weight: 700;
	}

	.pro-head {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;

		padding: 1vh 2vw;
	}

	.pro-head>img {
		width: 6vh;
		height: 6vh;
	}

	.pro-head>img:nth-child(1) {
		width: 8vh;
		height: 8vh;
	}

	.food-card {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;

		height: 10vh;
		background-color: #21bcff;
		padding: 3vw 6vw;
		margin: 1.5vh 2vw;
		border-radius: 15px;
		color: #FFFFFF;
	}

	.food-card>span {
		font-size: 13px;
		color: #c1e6ff;
		white-space: nowrap;
		/*强制span不换行*/
		display: inline-block;
		/*将span当做块级元素对待*/
		width: 85vw;
		overflow: hidden;
		/*超出宽度部分隐藏*/
		text-overflow: ellipsis;
		/*超出部分以点号代替*/
	}

	.com-fuc {
		background-color: #FFF;
		padding: 3vw 4vw;
		margin: 1.5vh 2vw;
		border-radius: 15px;
	}

	.com-fuc-tol {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}

	.com-fuc-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.com-fuc-item>span {
		font-size: 12px;
		font-family: "楷体";
	}

	.com-fuc-item>img {
		width: 18vw;
		height: 18vw;
	}

	.int-play {
		background-color: #FFF;
		padding: 3vw 4vw;
		margin: 1.5vh 2vw;
		border-radius: 15px;
	}

	.int-play-tol {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}

	.int-play-item {
		width: 40vw;
		height: 10vh;

		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
		align-items: flex-start;

		padding-top: 1vh;
	}

	.int-play-item>span:nth-child(1) {
		display: inline;
		font-size: 14px;
		line-height: 24px;
		padding-top: 5px;
	}

	.int-play-item>span:nth-child(2) {
		display: inline;
		font-size: 12px;
		line-height: 24px;
		padding-bottom: 5px;
		color: #999999;
	}

	.int-play-item>img {
		width: 10vh;
		height: 10vh;
	}

	.my-wallet {
		background-color: #FFF;
		padding: 3vw 4vw;
		margin: 1.5vh 2vw;
		border-radius: 15px;
	}

	.wallet {
		display: flex;
		justify-content: space-between;

	}

	.wallet-tol {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.wallet-item {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

		padding: 3vh 0;
	}

	.wallet-item>span {
		display: inline;
		font-size: 12px;
		width: 10vh;
		line-height: 4vh;
		text-align: center;
	}

	.more-rec {
		background-color: #FFF;
		padding: 3vw 4vw;
		margin: 1.5vh 2vw;
		border-radius: 15px;
	}


	.rec-tol {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: space-around;
	}

	.rec-item>img {
		width: 12vw;
		height: 12vw;
	}

	.rec-item>span {
		white-space: nowrap;
		/*强制span不换行*/
		display: inline-block;
		/*将span当做块级元素对待*/
		width: 20vw;
		overflow: hidden;
		/*超出宽度部分隐藏*/
		text-overflow: ellipsis;
		/*超出部分以点号代替*/
		text-align: center;
		font-size: 12px;
	}

	.rec-item {
		width: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 2vh 1px 0;
	}
</style>
